<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>jQuery Colorpicker</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<!-- jQuery/jQueryUI (hosted) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <style>
			body {
				font-family:	'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
				font-size:		62.5%;
			}
        </style>
		<script src="jquery.colorpicker.js"></script>
		<link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
		<script src="i18n/jquery.ui.colorpicker-nl.js"></script>
		<script src="swatches/jquery.ui.colorpicker-pantone.js"></script>
		<script src="swatches/jquery.ui.colorpicker-crayola.js"></script>
		<script src="swatches/jquery.ui.colorpicker-ral-classic.js"></script>
		<script src="swatches/jquery.ui.colorpicker-x11.js"></script>
		<script src="swatches/jquery.ui.colorpicker-copic.js"></script>
		<script src="swatches/jquery.ui.colorpicker-prismacolor.js"></script>
		<script src="swatches/jquery.ui.colorpicker-isccnbs.js"></script>
		<script src="swatches/jquery.ui.colorpicker-din6164.js"></script>
		<script src="parts/jquery.ui.colorpicker-rgbslider.js"></script>
		<script src="parts/jquery.ui.colorpicker-memory.js"></script>
		<script src="parts/jquery.ui.colorpicker-swatchesswitcher.js"></script>		
		<script src="parsers/jquery.ui.colorpicker-cmyk-parser.js"></script>
		<script src="parsers/jquery.ui.colorpicker-cmyk-percentage-parser.js"></script>

		<script>
			$(function() {
				$('#tabs').tabs();
			});
		</script>
    </head>
    <body>
		<h1>jQuery ColorPicker - Demo page</h1>

		<div id="tabs">
			<ul>
			  <li><a href="#tab-input">Basic &lt;input&gt;</a></li>
			  <li><a href="#tab-element">Basic element</a></li>
			  <li><a href="#tab-full">All features</a></li>
			  <li><a href="#tab-i18n">Localization</a></li>
			  <li><a href="#tab-websafe">Websafe colors</a></li>
			  <li><a href="#tab-alt">Alternative display field</a></li>
			  <li><a href="#tab-events">Events</a></li>
			  <li><a href="#tab-input-format">Input formatting</a></li>
			  <li><a href="#tab-format">Output formatting</a></li>
			  <li><a href="#tab-format-list">Output format list</a></li>
			  <li><a href="#tab-dialog">In a dialog</a></li>
			  <li><a href="#tab-modal">Modal</a></li>
			  <li><a href="#tab-no-inline">Any element to popup</a></li>
			  <li><a href="#tab-layout">Custom layout</a></li>
			  <li><a href="#tab-pantone">Custom swatches</a></li>
			  <li><a href="#tab-swatches-array">Custom swatches - array</a></li>
			  <li><a href="#tab-hidden-input">Hidden input</a></li>
			  <li><a href="#tab-plugins">Plugins</a></li>
			  <li><a href="#tab-buttonImageOnly">buttonImageOnly</a></li>
			  <li><a href="#tab-revert">Revert</a></li>
			  <li><a href="#tab-okonenter">Close on enter</a></li>
			  <li><a href="#tab-128">128-pixel map and bar</a></li>
			  <li><a href="#tab-customcolor">Custom color format</a></li>
			  <li><a href="#tab-position">Centered in window</a></li>
			  <li><a href="#tab-disable">Disable/enable</a></li>
			  <li><a href="#tab-noanim">No show animation</a></li>
			</ul>

			<div id="tab-input">
				<h2>Basic &lt;input&gt; example, without any options</h2>
				<input type="text" class="cp-basic" value="fe9810"/>

				<script>
					$(function() {
					});
				</script>
			</div>

			<div id="tab-element">
				<h2>Basic element (&lt;span&gt;> example, without any options</h2>
				<span class="cp-basic" style="display: inline-block; vertical-align: top;"></span>

				<script>
					$(function() {
						$('.cp-basic').colorpicker();
					});
				</script>
			</div>

			<div id="tab-full">
				<h2>Fully-featured example</h2>
				<input type="text" class="cp-full" value="186aa7"/>

				<script>
					$(function() {
						$('.cp-full').colorpicker({
							parts: 'full',
							showOn: 'both',
							buttonColorize: true,
							showNoneButton: true,
							alpha: true,
							colorFormat: 'RGBA'
						});
					});
				</script>
			</div>

			<div id="tab-i18n">
				<h2>Localized to Dutch (nl)</h2>
				<input type="text" class="cp-i18n" value="ccea73"/>

				<script>
					$(function() {
						$('.cp-i18n').colorpicker({
							regional: 'nl',
							showNoneButton: true,
							alpha: true
						});
					});
				</script>
			</div>

			<div id="tab-websafe">
				<h2>Limit to websafe colors</h2>
				<input type="text" class="cp-websafe" value="0fa7c2"/>

				<script>
					$(function() {
						$('.cp-websafe').colorpicker({
							limit: 'websafe'
						});
					});
				</script>
			</div>

			<div id="tab-alt">
				<h2>Alternative field class</h2>
				<input type="text" class="cp-alt" value="b762ae"/>
				<span class="cp-alt-target" style="display: inline-block; border: thin solid black; padding: .5em 4em;">
					<div style=" background-color: white; border: thin solid black; padding: .25em 2em; font-size: 1.25em; font-weight: bold;">Background-color on outside, text color here</div>
				</span>

				<script>
					$(function() {
						$('.cp-alt').colorpicker({
							altField: '.cp-alt-target',
							altProperties: 'background-color,color',
							altAlpha: true,
							alpha: true
						});
					});
				</script>
			</div>

			<div id="tab-events">
				<h2>Events</h2>
				<input type="text" class="cp-events" value="92b64a"/>
				<div class="cp-events-log" style="vertical-align: top; display: inline-block; border: thin solid black; height: 10em; overflow-y: scroll; width: 50em;"></div>

				<script>
					$(function() {
						var count = 0;

						function addToEventLog(label, message) {
							var line = '<div>#'+(++count)+' '+label+': '+message+'</div>',
								log = $('.cp-events-log');
							log.append(line).scrollTop(log[0].scrollHeight);
						}

						$('.cp-events').colorpicker({
							init:			function(event, color) {
												addToEventLog('Init', color.formatted, color.colorPicker.color.toCSS());
											},
							select:			function(event, color) {
												addToEventLog('Select', color.formatted);
											},
							stop:			function(event, color) {
												addToEventLog('Stop', color.formatted);
											},
							close:			function(event, color) {
												addToEventLog('Close', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a);
											},
							ok:         	function(event, color) {
												addToEventLog('Ok', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a);
											},
							open:         	function(event, color) {
												addToEventLog('Open', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a);
											},
							cancel:			function(event, color) {
												addToEventLog('Cancel', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a);
											}
						});
					});
				</script>
			</div>

			<div id="tab-format">
				<h2>Output formatting HSLA</h2>
				<input type="text" class="cp-format" value="918237"/>
				<span class="cp-format-output"></span>

				<script>
					$(function() {
						$('.cp-format').colorpicker({
							colorFormat: 'HSLA',
							alpha: true,
							init: function(event, color) {
										$('.cp-format-output').text(color.formatted);
									},
							select: function(event, color) {
										$('.cp-format-output').text(color.formatted);
									}
						});
					});
				</script>
			</div>

			<div id="tab-format-list">
				<h2>Output format list</h2>
				You can specify a list of output formats, the first perfect match for the color is output.<br/>
				<input type="text" class="cp-name" value="a92fb4"/>
				<span class="cp-name-output"></span>

				<script>
					$(function() {
						$('.cp-name').colorpicker({
							parts: 'full',
							colorFormat: ['EXACT', '#HEX3', 'RGB', 'RGBA'],
							init: function(event, color) {
										$('.cp-name-output').text(color.formatted);
									},
							select: function(event, color) {
										$('.cp-name-output').text(color.formatted);
									}
						});
					});
				</script>
			</div>

			<div id="tab-dialog">
				<h2>Dialog with Colorpicker popup (demonstrates z-index)</h2>
				<button id="cp-dialog-open">Open dialog</button>
				<div id="cp-dialog-modal" title="Basic modal dialog">
					Basic &lt;input&gt; example, without any options: <input type="text" class="cp-onclick" value="fe9810"/>
					<br/>
					Basic element example, without any options: <span class="cp-onclick" style="display: inline-block; vertical-align: top;"></span>
				</div>

				<script>
					$(function() {
						var dialogModal = $('#cp-dialog-modal').dialog({
							autoOpen:	false,
							minWidth:	500,
							modal:		true,
							buttons:	{	'Close': function() {
												$(this).dialog('close');
											}
										}
						});
						$('.cp-onclick').colorpicker({
							showOn:			'click',
							inlineFrame:	false
						});
						$('#cp-dialog-open').click(function() {
							dialogModal.dialog('open');
						});
					});
				</script>
			</div>

			<div id="tab-modal">
				<h2>Modal (and showCancelButton, closeOnEscape, showCloseButton)</h2>
				<input type="text" class="cp-modal" value="9ba73f"/>

				<script>
					$(function() {
						$('.cp-modal').colorpicker({
							parts:				'draggable',
							showCloseButton:	false,
							modal:				true,
							showCancelButton:	false,
							closeOnEscape:		false
						});
					});
				</script>
			</div>

			<div id="tab-input-format">
				<h2>Input formatting</h2>
				Demonstrates the ability to parse common color formats as input.<br/>
				<input type="text" class="cp-input" value="rgb(123,42,87)"/>

				<script>
					$(function() {
						$('.cp-input').colorpicker({
							colorFormat: ['RGBA']
						});
					});
				</script>
			</div>

			<div id="tab-no-inline">
				<h2>Popup from any element (&lt;em&gt;)</h2>
				Just click on this <em>Emphasized</em> word to show the colorpicker.

				<script>
					$(function() {
						$('em').colorpicker({
							inline: false
						});
					});
				</script>
			</div>

			<div id="tab-layout">
				<h2>Custom layout</h2>
				It's easy to arrange a new layout for the dialog. Especially handy when used in a sidebar.<br/>
				<input type="text" class="cp-layout" value="92b7a5"/>

				<script>
					$(function() {
						$('.cp-layout').colorpicker({
							parts:	['header', 'map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'preview', 'swatches', 'footer'],
							alpha: true,
							layout: {
								hex:		[0, 0, 2, 1],
								preview:	[2, 0, 1, 1],
								map:		[0, 1, 3, 1],	// Left, Top, Width, Height (in table cells).
								bar:		[0, 2, 1, 4],
								swatches:	[2, 2, 1, 4],
								rgb:		[1, 2, 1, 1],
								hsv:		[1, 3, 1, 1],
								alpha:		[1, 4, 1, 1],
								lab:		[0, 5, 1, 1],
								cmyk:		[1, 5, 1, 2]
							}
						});
					});
				</script>
			</div>

			<div id="tab-pantone">
				<h2>Custom swatches</h2>
				Use the Pantone PMS colors as swatches<br/>
				<input type="text" class="cp-pantone" value="242"/>
				<span class="cp-pantone-output"></span>

				<script>
					$(function() {
						$('.cp-pantone').colorpicker({
							parts:			'full',
							swatches:		'pantone',
							colorFormat:	'NAME',
							swatchesWidth:	173,
							limit:			'name',
							init:			function(event, color) {
												$('.cp-pantone-output').text(color.formatted);
											},
							select:			function(event, color) {
												$('.cp-pantone-output').text(color.formatted);
											}
						});
					});
				</script>
			</div>

			<div id="tab-swatches-array">
				<h2>Custom swatches - array</h2>
				Use an array of swatches<br/>
				<input type="text" class="cp-custom-array" value="666666"/>
				<span class="cp-custom-array-output"></span>

				<script>
					$(function() {
						/** Correctly handles the order of swatches.
						*/
						jQuery.colorpicker.swatches.custom_array = [
							{name: '000000', r: 0, g: 0, b: 0},
							{name: '444444', r: 0.266666666666667, g: 0.266666666666667, b:
								0.266666666666667},
							{name: '666666', r: 0.4, g: 0.4, b: 0.4},
							{name: '999999', r: 0.6, g: 0.6, b: 0.6}
						];
						/** This is supported, but does not respect the order in chrome.
						Black appears at the end of the list of swatches. */
						jQuery.colorpicker.swatches.custom = {
							'000000': {r: 0, g: 0, b: 0},
							'444444': {r: 0.266666666666667, g: 0.266666666666667, b:
								0.266666666666667},
							'666666': {r: 0.4, g: 0.4, b: 0.4},
							'999999': {r: 0.6, g: 0.6, b: 0.6}
						};

						$('.cp-custom-array').colorpicker({
							parts:			'full',
							swatches:		'custom_array',
							colorFormat:	'NAME',
							swatchesWidth:	173,
							limit:			'name',
							init:			function(event, color) {
												$('.cp-custom-array-output').text(color.formatted);
											},
							select:			function(event, color) {
												$('.cp-custom-array-output').text(color.formatted);
											},
							containment: 'body'
						});
					});
				</script>
			</div>

			<div id="tab-hidden-input">
				<h2>Hidden input</h2>
				Uses a hidden input and buttons to pop open the colorpicker<br/>
				<input type="hidden" class="cp-hidden-input" value="#abc123"/>
				<button id="cp-hidden-input-open">Open</button>

				<script>
					$(function() {
						var dialogHidden = $('.cp-hidden-input').colorpicker();
						$('#cp-hidden-input-open').click(function(e) {
							e.stopPropagation();
							dialogHidden.colorpicker('open');
						});
					});
				</script>
			</div>

			<div id="tab-plugins">
				<h2>Plugins</h2>
				Demonstrates how to extend the set of parts with plugins.<br/>
				<ol>
					<li>RGB Slider - Individual RGB sliders</li>
					<li>Memory - Store and retrieve colors with cookies</li>
					<li>Swatches Switcher - Switch between different sets of swatches</li>
				</ol>
				<input type="text" class="cp-plugins" value="#18b7af"/>

				<script>
					$(function() {
						$('.cp-plugins').colorpicker({
							parts:	['header', 'preview', 'hex', 'rgbslider', 'memory', 'swatches', 'swatchesswitcher', 'footer'],
							layout: {
								preview:			[0, 0, 1, 1],
								hex:				[1, 0, 1, 1],
								rgbslider:			[0, 1, 2, 1],
								memory:				[0, 2, 2, 1],
								
								swatchesswitcher:	[2, 0, 1, 1],
								swatches:			[2, 1, 1, 2]
							}
						});
					});
				</script>
			</div>

			<div id="tab-buttonImageOnly">
				<h2>Only a button image</h2>
				<input type="text" class="cp-buttonImageOnly" value="#18b7af"/>
				<br/>
				<label for="toggle-cp-buttonImageOnly-disable">Enabled: <input type="checkbox" id="toggle-cp-buttonImageOnly-disable" checked="checked"/></label>

				<script>
					$(function() {
						$('.cp-buttonImageOnly').colorpicker({
							showOn:				'both',
							buttonImageOnly:	true
						});
					
						$('#toggle-cp-buttonImageOnly-disable').click(function() {
							$('.cp-buttonImageOnly').colorpicker($(this).is(':checked') ? 'enable' : 'disable');
						});
					});
				</script>
			</div>

			<div id="tab-revert">
				<h2>Revert color on non-button exit.</h2>
				<p>Reverts the color on escape, clickOnOutside or close window
				using the [X] button.</p>
				<p>Open the Colorpicker, change color and click outside window,
				press ESC key or click the [X] button in the header. The dialog
				should now close and the previous color restored in the
				input.</p>
				<input type="text" class="cp-revert" value=""/>

				<script>
					$(function() {
						$('.cp-revert').colorpicker({
							revert:				true,
							parts:				'full',
							showNoneButton:		true
						});
					});
				</script>
			</div>

			<div id="tab-okonenter">
				<h2>Close OK on enter</h2>
				Close the popup by pressing the enter key, keeping the selected color.
				<input type="text" class="cp-okonenter" value="a83b19"/>

				<script>
					$(function() {
						$('.cp-okonenter').colorpicker({
							okOnEnter: true
						});
					});
				</script>
			</div>

			<div id="tab-128">
				<h2>128-pixel map and bar</h2>
				<span class="cp-128" style="display: inline-block; vertical-align: top;"></span>

				<script>
					$(function() {
						$('.cp-128').colorpicker({
							parts:	['map', 'bar'],
							layout: {
								map:		[0, 0, 1, 1],	// Left, Top, Width, Height (in table cells).
								bar:		[1, 0, 1, 1]							
							},
							part:	{
								map:		{ size: 128 },
								bar:		{ size: 128 }
							}
						});
					});
				</script>
			</div>

			<div id="tab-customcolor">
				<h2>Custom color format</h2>
				<input type="text" size="80" class="cp-customcolor" value="0;83.782958984375;83.782958984375;4.736328125" style="display: inline-block; vertical-align: top;"/>

				<script>
					$(function() {
						$.colorpicker.parsers['csv-cmyk'] = function (color) {
								var m = /^(\d+(?:\.\d+)?)\s*[,;]\s*(\d+(?:\.\d+)?)\s*[,;]\s*(\d+(?:\.\d+)?)\s*[,;]\s*(\d+(?:\.\d+)?)/.exec(color);
								if (m) {
										return (new $.colorpicker.Color()).setCMYK(
												m[1] / 100,
												m[2] / 100,
												m[3] / 100,
												m[4] / 100
										);
								}
						};

						$('.cp-customcolor').colorpicker({
							showOn: 'both',
							colorFormat: ['cp,mp,yp,kp'],
							buttonImageOnly: true,
							buttonColorize: true,
						});
					});
				</script>
			</div>
			
			<div id="tab-position">
				<h2>Centered using position option</h2>
				<input type="text" class="cp-position"/>

				<script>
					$(function() {
						$('.cp-position').colorpicker({
							position: {
								my: 'center',
								at: 'center',
								of: window
							},
							modal: true
						});
					});
				</script>
			</div>

			<div id="tab-disable">
				<h2>Disable/enable</h2>
				<label for="toggle-cp-disable">Enabled: <input type="checkbox" id="toggle-cp-disable"/></label>
				<br/>
				Disabled by default:
				<input type="text" class="cp-disable" value="186aa7" disabled="disabled"/>
				<br/>
				Disabled using option:
				<input type="text" class="cp-disable-option" value="186aa7"/>
				<br/>
				<span class="cp-disable-option" style="display: inline-block; vertical-align: top;"></span>

				<script>
					$(function() {
						$('.cp-disable').colorpicker({
							showOn: 'both',
							buttonColorize: true
						});

						$('.cp-disable-option').colorpicker({
							parts: 'full',
//							parts:	['header', 'preview', 'hex', 'rgbslider', 'memory', 'swatches', 'swatchesswitcher', 'footer'],
//							layout: {
//								preview:			[0, 0, 1, 1],
//								hex:				[1, 0, 1, 1],
//								rgbslider:			[0, 1, 2, 1],
//								memory:				[0, 2, 2, 1],
//								swatchesswitcher:	[2, 0, 1, 1],
//								swatches:			[2, 1, 1, 2]
//							},
							showOn: 'both',
							disabled: true,
							buttonColorize: true,
							alpha: true

						});

						$('#toggle-cp-disable').click(function() {
							$('.cp-disable, .cp-disable-option').colorpicker($(this).is(':checked') ? 'enable' : 'disable');
						});
					});
				</script>
			</div>

			<div id="tab-noanim">
				<h2>No show animation</h2>
				<input type="text" class="cp-noanim" value="8e44ad"/>

				<script>
					$(function() {
						$('.cp-noanim').colorpicker({
							showAnim: ''
						});
					});
				</script>
			</div>

		</div>
    </body>
</html>
